<template>
  <div class="evaluate">
    <div class="evaluate_title">
      <div class="title_left">
        <p class="stars">{{ sellerdata.score }}</p>
        <p>综合评分</p>
        <p class="stars2">
          高于周边商家<span>{{ sellerdata.sellCount }}</span
          >%
        </p>
      </div>
      <div class="title_right">
        <p>
          服务态度
          <van-rate
            v-model="value"
            :size="12"
            color="rgb(255, 111, 15)"
            void-icon="star"
            void-color="#eee"
            readonly
          />
          <span class="stars">{{ value }}</span>
        </p>
        <p>
          菜品质量
          <van-rate
            v-model="value2"
            :size="12"
            color="rgb(255, 111, 15)"
            void-icon="star"
            void-color="#eee"
            readonly
          />
          <span class="stars">{{ value2 }}</span>
        </p>
        <p>
          送达时间
          <span class="stars2 stars3">
            <span>{{ sellerdata.minPrice }}</span
            >分钟</span
          >
        </p>
      </div>
    </div>

 <Comment/>


  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { $_getseller, $_getratings } from "@/apis/goods"; //商家数据接口
import { ISeller, } from "../../interface/goodsinterface"; //约束商家
import Comment from '../main_modules/Comment/Comment.vue'

@Component({
  //注册自定义组件------购物车点击组件
  components:{
      Comment,
  }

})
export default class Evaluate extends Vue {
  value: any = 0;
  value2: any = 0;
  sellerdata: ISeller = {}; //约束商家信息


  created(): void {
    //获取商家数据
    $_getseller().then((res) => {
      //商家数据
      this.sellerdata = res.data.data;

      // console.log(res.data.data, 1111);

      this.value = this.sellerdata.score; //赋值评分
      this.value2 = this.sellerdata.deliveryPrice; //赋值评分
    });

  }
}
</script>

<style scoped lang='scss'>
//背景
.evaluate {
  background-color: rgb(245, 245, 245);
  height: 100%;
  overflow: scroll;
}

//隐藏右侧滚动条
.evaluate::-webkit-scrollbar {
  display: none;
}
//评分
.evaluate_title {
  display: flex;
  height: 120px;

  background-color: rgb(255, 255, 255);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  //左边评分
  .title_left {
    width: 120px;
    height: 80px;
    display: flex;
    // background-color: rgb(95, 136, 224);
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid rgb(238, 238, 238);
    padding-right: 10px;
    & > p:nth-of-type(1) {
      font-size: 25px;
    }
    & > p:nth-of-type(2) {
      font-weight: bold;
      margin: 5px 0;
    }
    & > p:nth-of-type(3) {
      font-size: 12px;
      color: rgb(49, 49, 49);
    }
  }
  //右边评分
  .title_right {
    flex: 1;
    margin-left: 20px;
    p {
      font-size: 12px;
      line-height: 24px;
    }
    //星星穿透
    ::v-deep.van-rate {
      color: rgb(255, 111, 15);
      margin: 0 10px;
    }
  }
  .stars {
    color: rgb(248, 181, 25);
  }
  .stars2 {
    color: rgb(151, 149, 149) !important;
  }
  .stars3 {
    display: inline-block;
    margin-left: 10px;
  }
}
</style>